<template>
  <div class="prescription_box">
    <ul class="header">
      <li :class="{selectLi:selectType == 0?true:false}" @click="selectType = 0">全部</li>
      <li :class="{selectLi:selectType == 1?true:false}" @click="selectType = 1">待审核</li>
      <li :class="{selectLi:selectType == 2?true:false}" @click="selectType = 2">已通过</li>
      <li :class="{selectLi:selectType == 5?true:false}" @click="selectType = 5">不通过</li>
    </ul>
    <div class="modelInfo" v-show="data.length > 0">
      <vue-scroll ref="vs" :ops="$store.state.ops">
        <div class="modelInfo_box">
          <div
            class="prescription_item"
            v-for="(item,index) in data"
            :key="index"
            @click="getdiagnosis(item.recipeId,item.recipeOddNumbers)"
          >
            <img v-if="Number(item.status) == 1" src="/static/img/待审核@2x (1).png" alt="">
            <img v-if="Number(item.status) == 2" src="/static/img/已通过@2x.png" alt="">
            <img v-if="Number(item.status) == 4" src="/static/img/已失效@2x.png" alt="">
            <img v-if="Number(item.status) == 5" src="/static/img/不通过@2x.png" alt />
            <img v-if="Number(item.status) == 3" src="/static/img/已取消@2x.png" alt="">
            <img v-if="item.status == 4" src="/static/img/已通过.png" alt="">
            <div class="item_title">处方单号：{{item.recipeOddNumbers}}</div>
            <div class="brClass"></div>
            <div class="diagnosis">初步诊断：{{item.firstDiagnose | infoFilter}}</div>
            <div class="itemTime">{{item.createDate | timeFilter}}</div>
            <div class="itemContent">查看详情 ></div>
          </div>
        </div>
      </vue-scroll>
    </div>
    <footer class="footer" v-show="data.length > 0">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="20"
        :hide-on-single-page="true"
        :current-page="currentPage"
        @current-change="currentChange"
      ></el-pagination>
    </footer>
    <div class="noData" v-show="noDataShow">
      <img class="noPatientImg" src="/static/img/暂无数据@3x.png" alt="">
      <span class="noPatient">暂无数据</span>
    </div>
  </div>
</template>
<script>
import { getRecipeDoctorRecipes } from "../../requestApi/prescription.js";
export default {
  components: {},
  data() {
    return {
      selectType: 0, //顶部导航栏选择
      data: [],
      total: 0, //总数
      currentPage: 1, //当前页数
      noDataShow: false
    };
  },
  created() {
    let self = this;
    this.listFun();
  },
  mounted() {},
  computed: {},
  methods: {
    currentChange(val) {
      let self = this;
      self.currentPage = val;
      self.listFun();
    },
    //获取数据 处方状态(处方状态: 1待通过, 2已通过, 3已取消, 4已失效, 5不通过)
    async listFun() {
      let self = this;
      let obj = {
        doctorId: localStorage.getItem("doctorId"),
        pageNo: this.currentPage,
        pageSize: 20
      };
      obj.status = self.selectType;
      let data = await getRecipeDoctorRecipes(obj);
      if (data.code == 200 && data.data) {
        if (data.data.records.length > 0) {
          this.data = data.data.records;
          this.noDataShow = false;
        } else {
          this.noDataShow = true;
        }
        this.total = data.data.total;
      } else {
        this.noDataShow = true;
        this.$message({
          type: "error",
          message: "暂无医生信息！"
        });
      }
    },
    //跳转详情
    getdiagnosis(recipeId, recipeOddNumbers) {
      let self = this;
      self.$router.push({
        path: "/home/prescription/content",
        query: {
          recipeId: recipeId,
          recipeOddNumbers: recipeOddNumbers
        }
      });
    }
  },
  filters: {
    timeFilter(val) {
      if (val) {
        var standardTime = new Date(val * 1);
        var y, m, d, h, f;
        y = standardTime.getFullYear();
        m = standardTime.getMonth() + 1;
        m = m > 9 ? m : "0" + m;
        d = standardTime.getDate();
        d = d > 9 ? d : "0" + d;
        h = standardTime.getHours();
        h = h > 9 ? h : "0" + h;
        f = standardTime.getMinutes();
        f = f > 9 ? f : "0" + f;
        return `${y}.${m}.${d} ${h}:${f}`;
      } else {
        return "暂无";
      }
    },
    infoFilter(val) {
      if (val) {
        if (val.length >= 8) {
          return val.slice(0, 6) + "...";
        } else {
          return val;
        }
      }
    }
  },
  watch: {
    selectType(val) {
      this.data = [];
      this.currentPage = 1;
      this.listFun();
    }
  }
};
</script>
<style scoped>
.prescription_box {
  width: 100%;
  position: relative;
  height: 100%;
}
.header {
  background-color: #fff;
  height: 60px;
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px 4px 0px 0px;
  padding: 0px 0px 0px 40px;
  overflow: hidden;
}
.header > li {
  height: 60px;
  line-height: 60px;
  padding: 0px 7px 0px 7px;
  float: left;
  margin-right: 50px;
  cursor: pointer;
}
.selectLi {
  color: #ff6532;
}
.header > li:active {
  color: #ff6532;
}
.header > li:focus {
  color: #ff6532;
}
.header > li:hover {
  color: #ff6532;
}

.modelInfo {
  height: calc(100% - 110px);
  overflow: hidden;
}
.modelInfo_box {
  overflow: hidden;
  height: 100%;
  padding-bottom: 20px;
}

.prescription_item {
  float: left;
  background-color: #fff;
  min-height: 164px;
  width: 31.7%;
  margin-right: 1.6%;
  margin-top: 2.5%;
  position: relative;
  padding-left: 20px;
  box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
  align-items: flex-start;
}
.prescription_item > img {
  width: 76px;
  height: 76px;
  position: absolute;
  top: 0px;
  right: 0px;
}
.item_title {
  font-size: 16px;
  font-weight: 600;
  font-family: MicrosoftYaHei;
  color: rgba(42, 41, 40, 1);
  margin-top: 12px;
  margin-bottom: 12px;
}
.brClass {
  border-top: 1px dashed #cdc8c6;
  width: 80%;
}
.diagnosis {
  margin-top: 18px;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: rgba(42, 41, 40, 1);
}
.itemTime {
  margin-top: 8px;
  font-size: 12px;
  font-family: MicrosoftYaHei;
  color: rgba(122, 118, 118, 1);
}
.itemContent {
  font-size: 12px;
  font-family: MicrosoftYaHei;
  color: rgba(122, 118, 118, 1);
  position: absolute;
  bottom: 18px;
  left: 20px;
  cursor: pointer;
}

.footer {
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 暂无数据 */
.noData {
  width: 100%;
  height: calc(100% - 60px);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.noPatientImg {
  width: 200px;
  height: 200px;
  position: relative;
  top: calc(50% - 100px);
  /* right: calc(50% - 100px); */
}
.noPatient {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: rgba(102, 102, 102, 1);
  margin-top: 16px;
  position: relative;
  top: calc(40% - 40px);
}
</style>